<template>
    <div id="sliderBox" class="slider-box" @click="aa"></div>
</template>

<script setup>
import { onMounted } from "vue";
let emits = defineEmits(["em_slider_current"]);
let props =  defineProps({
    // slider颜色
    slider_color: {
        type: String,
        default: "#f06595",
    },
    //当前silider
    slider_current:{
        type:Number,
        default:1
    },
    //是否重从0开始
    is_init_zero:{
         type:Boolean,
        default:true
    },
    slider_max:{
        type:Number,
        default:20
    }
});
class Slider {
    constructor(option) {
        //判断是否传入id
        if (!option || !option.boxId) {
            throw new Error("Slider needed boxId");
        }
        this.boxId = option.boxId;
        this.onValueChange = option.onValueChange;
        this.stepEnable = !option.stepEnable ? false : true;
        this.flag = false;
        this.min = option.min || 0;
        this.max = option.max || 10;
        this.step = option.step || 1;
        this.leftOff = option.leftOff || 0;
        this.value = option.value || 0;
        this.color = option.color || "#96f2d7";
        this.init();
    }
    init() {
        this.render();
        this.addListener();
    }
    render() {
        // get sliderBox
        this.sliderBox = document.getElementById(this.boxId);
        // 创建园点
        const slider = document.createElement("span");
        const slider_plan = document.createElement("div");
        slider.className = "slider";
        slider_plan.className = "slider-plan";
        slider_plan.style.backgroundColor = this.color;
        slider.style.backgroundColor = this.color;
        this.slider_plan = slider_plan;
        this.slider = slider;
        this.sliderBox.appendChild(this.slider);
        this.sliderBox.appendChild(this.slider_plan);

        // get slider-box width
        this.boxWidth = this.sliderBox.offsetWidth;
        // get slider-box left
        this.boxLeft = this.sliderBox.getBoundingClientRect().left;
        this.setLeftByValue();
    }
    // 设置滑块默认位置初始化渲染时默认值
    setLeftByValue() {
        const left = ((this.value / this.max) * this.boxWidth).toFixed(2);
        this.slider.style.left = left - this.leftOff + "px";
        console.log(left - this.leftOff);
        this.slider_plan.style.width =
            left - this.leftOff < 0 ? 0 + "px" : left - this.leftOff + "px";
    }
    //得到当前值和滑块的位置
    getCurrentValue(left) {
        let current = (left / this.boxWidth) * this.max;
        current = Math.round(current / this.step);
        current = current * this.step;
        return {
            current,
            left: this.stepEnable
                ? (current / this.max) * this.boxWidth.toFixed(2)
                : left,
        };
    }
    // 当页面或组件加载添加侦听器
    addListener() {
        this.slider.addEventListener("touchstart", this.onMouseDown);
        this.slider.addEventListener("touchmove", this.onMouseMove);
        this.slider.addEventListener("touchup ", this.onMouseUp);
    }
    // 当页面或组件销毁删除侦听器
    removeListener() {
        this.slider.removeEventListener("touchstart", this.onMouseDown);
        document.removeEventListener("touchmove", this.onMouseMove);
        document.removeEventListener("touchup", this.onMouseUp);
    }
    // 手指按下
    onMouseDown = () => {
        this.flag = true;
    };
    // 手指移动
    onMouseMove = (event) => {
        if (this.flag) {
            // 得到圆点得位置
            const offsetX = event.touches[0].clientX - this.boxLeft;
            // get left offset
            let left = 0;
            if (offsetX > this.boxWidth) {
                left = this.boxWidth;
            } else if (offsetX >= 0) {
                left = offsetX;
            } else {
                left = 0;
            }

            const result = this.getCurrentValue(left);
            if (this.onValueChange) {
                // send to onValueChange function when it exist
                if (result.current !== this.value) {
                    // emit change event when value is different
                    this.value = result.current;
                    this.onValueChange(result.current);
                }
            }
            // 圆点距离左边的距离
            this.slider.style.left = result.left - this.leftOff + "px";
            // 进度的长度
            this.slider_plan.style.width =
                result.left - this.leftOff < 0
                    ? 0 + "px"
                    : result.left - this.leftOff + "px";
        }
    };

    // mouseup event of document
    onMouseUp = () => {
        this.flag = false;
    };
    destroy() {
        this.removeListener();
    }
}

onMounted(() => {
    new Slider({
        boxId: "sliderBox", // slider box id
        stepEnable: true, // enable step
        min: 1, //最小值
        max: props.is_init_zero? props.slider_max - 1:props.slider_max , //最大值
        step: 1, //间隔
        leftOff: 0, // slider left offset
        value: 0, // default value
        onValueChange: function (current) {
            emits("em_slider_current", props.is_init_zero? current+1:current );
        },
    });
});
</script>
<style>
.slider-box {
    width: 400;
    height: 4px;
    background-color: #eee;
    border-radius: 4px;
    position: relative;
}

.slider-plan {
    width: 0;
    height: 100%;
    background-color: red;
    transition: all 0.5s;
}

.slider {
    position: absolute;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #f06595;
    top: -4px;
    left: -6px;
    transition: all 0.5s;
}
</style>
